<template>
	<view class="tabbar-class">
		<u-tabbar
			:value="index"
			@change="change"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			activeColor="#006737"
		>
		<template v-for="(item,key,ind) in tabbar">
			<u-tabbar-item @click="click" size="50">
        <view slot="text" class="block" :class="{'focus':item.iconPath == menuSelect}">
          <i class="iconfont icon" :class="item.icon"></i>
          <text class="text">{{ item.text }}</text>
        </view>
      </u-tabbar-item>
		</template>
		</u-tabbar>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
    props:{
      menuSelect:{
        type:String
      }
    },
		data() {
			return {
        // menuSelect:0
			}
		},
		computed:{
		...mapState(['tabbar','index'])
		},
		methods: {
			...mapMutations(['setIndex']),
			change(name){
        console.log(name);
        this.setIndex(name)
			},
			click(e) {
				console.log(this.tabbar,e,this.tabbar[e].pagePath);
				uni.navigateTo({
					url: this.tabbar[e].pagePath
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.tabbar-class{
  ::v-deep .u-tabbar__content{
    border:0px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }
  color:#999;
  font-weight: bold;
  .icon{
    font-size: 40rpx;
  }
  .text{
    font-size: 24rpx;
  }
}
.block{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &.focus{
    width:100%;
    //background:#006737;
    color:#006737;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
::v-deep .u-tabbar__content{
  border:0px !important;
}
</style>
